<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 0 auto;
            width: 960px;
            text-align: center;
        }

        .header {
            overflow: hidden;
            background-color: #ccc;
        }

        .logo {
            float: left;
            width: 200px;
            height: 80px;
            line-height: 80px;
        }

        .banner1,
        .banner2 {
            float: left;
            width: 360px;
            height: 80px;
            background-color: #ccc;
            margin: 0 10px;
            line-height: 80px;
        }

        .meal {
            background-color: #ccc;
            height: 30px;
            line-height: 30px;
            margin-top: 10px;
            margin-bottom: 10px;
            clear: both;
        }

        .content {
            overflow: hidden;
        }

        .content-left {
            float: left;
            width: 368px;
            margin-right: 10px;
        }

        .content-one,
        .content-three {
            float: left;
            width: 368px;
            height: 198px;
            line-height: 198px;
            margin-bottom: 10px;
            border: 1px solid black;
        }

        .content-three {
            width: 178px;
            line-height: 178px;
            margin-right: 10px;
        }

        .content-right {
            float: right;
            width: 198px;
        }

        .content-seven {
            height: 128px;
            line-height: 128px;
            margin-bottom: 10px;
            border: 1px solid black;
        }

        .footer {
            clear: both;
            background-color: #ccc;
            height: 60px;
            line-height: 60px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <div class="header">
            <div class="logo">
                logo
            </div>
            <div class="banner1">banner1</div>
            <div class="banner2">banner2</div>
        </div>
        <!-- 菜单 -->
        <div class="meal">菜单</div>
        <!-- 内容 -->
        <div class="content">
            <!-- 内容左边 -->
            <div class="content-left">
                <!-- 内容左边的上边 -->
                <div class="content-ltop">
                    <div class="content-one">栏目一</div>
                    <div class="content-one">栏目二</div>
                </div>
                <!-- 内容左边的下边 -->
                <div class="content-lbottom">
                    <div class="content-three">栏目三</div>
                    <div class="content-three">栏目四</div>
                    <div class="content-three">栏目五</div>
                    <div class="content-three">栏目六</div>
                </div>
            </div>
            <!-- 内容右边 -->
            <div class="content-right">
                <div class="content-seven">栏目七</div>
                <div class="content-seven">栏目八</div>
                <div class="content-seven">栏目九</div>
            </div>
        </div>
        <!-- 页脚 -->
        <div class="footer">页脚</div>
    </div>
</body>
</html>
